<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>8 模板语法-指令</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
<div id="app">
    <select @change="changeVal($event)" v-model="selOption">
        <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
            <!-- 索引为 1 的设为默认值，索引值从0 开始-->
            <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option>
            <option v-else :value="site.name">{{site.name}}</option>
        </template>
    </select>
    <div>您选中了:{{selOption}}</div>
</div>

<script>
    const app = {
        data() {
            return {
                selOption: "Runoob",
                sites: [
                    {id:1,name:"Google"},
                    {id:2,name:"Runoob"},
                    {id:3,name:"Taobao"},
                ]
            }

        },
        methods:{
            changeVal:function(event){
                this.selOption = event.target.value;
                alert("你选中了"+this.selOption);
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>